<%--
  Created by IntelliJ IDEA.
  User: soft01
  Date: 21-7-21
  Time: 下午1:31
  To change this template use File | Settings | File Templates.
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>商品管理</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/back-index.css" />
    <script src="${pageContext.request.contextPath}/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap-paginator.js"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap-mypaginator.js"></script>
    <style>
        .file {
            position: relative;
            display: inline-block;
            background: #D0EEFF;
            border: 1px solid #99D3F5;
            border-radius: 4px;
            padding: 4px 12px;
            overflow: hidden;
            color: #1E88C7;
            text-decoration: none;
            text-indent: 0;
            line-height: 20px;
            width: 100%;
            text-align: center;
        }
        .file:hover {
            background: #AADFFD;
            border-color: #78C3F3;
            color: #004974;
            text-decoration: none;
        }
        .file:focus {
            background: #AADFFD;
            border-color: #78C3F3;
            color: #004974;
            text-decoration: none;
        }
        .img {
            width: 100px;
        }
        tr td {
            line-height: 120px !important;
        }

    </style>
    <script type="text/javascript">
        $(function(){
            // 修改商品
            $(".doProductModify").on("click", function() {
                $("#product_id_input").show();
                $(".file").html("选择图片");
                $("#cover_image").val(undefined);
                $(".modal-title").html("修改商品");
                $("#product").modal("show");
            });
            $(".curse-btn").on("click", function() {
                $("#product").modal("hide");
            });

            // 添加商品
            $("#doProduct").on("click", function() {
                $("#product_id_input").hide();
                $(".file").html("选择图片");
                $("#cover_image").val(undefined);
                $(".modal-title").html("添加商品");
                $("#product").modal("show");
            });

            // 显示隐藏查询列表
            $('#show_product_search').click(function() {
                $('#show_product_search').hide();
                $('#upp_product_search').show();
                $('.show-product-search').slideDown(500);
            });
            $('#upp_product_search').click(function() {
                $('#show_product_search').show();
                $('#upp_product_search').hide();
                $('.show-product-search').slideUp(500);
            });

            //分页回调函数,点击按钮事件
            myoptions.onPageClicked = function(event, originalEvent, type, page) {
                //ajax回调接收数据成功时再重新初始化分页按钮
                console.log("pageNo=", page);
            };

            //分页,在bootstrap-mypaginator.js中
            myPaginatorFun("myPages", 1, 5);
        });

        function imageUpload(item){
            $(item).click();
        }
        function imageChange(item){
            var file = item.files[0];//获取选中的第一个文件
            $(".file").html(file.name);
            //console.log("file", file.name);
        }
    </script>

</head>

<body>
<div class="panel panel-default" >
    <div class="panel-heading">
        <h3 class="panel-title">商品管理</h3>
    </div>
    <div>
        <input type="button" value="添加商品" class="btn btn-primary" id="doProduct" style="margin: 5px 5px 5px 15px;" />
        <input type="button" value="查询" class="btn btn-success" id="doSearch" style="margin: 5px 5px 5px 0px;" />
        <input type="button" class="btn btn-primary" id="show_product_search" value="展开搜索" />
        <input type="button" value="收起搜索" class="btn btn-primary" id="upp_product_search" style="display: none;" />
    </div>
    <div class="panel-body">
        <div class="show-product-search" style="display: none;">
            <form class="form-horizontal">
                <div class="form-group">
                    <div class="form-group col-xs-6">
                        <label for="product_name_search" class="col-xs-3 control-label">商品名称：</label>
                        <div class="col-xs-8">
                            <input type="text" class="form-control" id="product_name_search" placeholder="请输入商品名称" />
                        </div>
                    </div>
                    <div class="form-group col-xs-6">
                        <label for="product_status_search" class="col-xs-3 control-label">状态：</label>
                        <div class="col-xs-8">
                            <select class="form-control" id="product_status_search" name="productStatusSearch" >
                                <option value="-1" >全部</option>
                                <option value="0" >启用</option>
                                <option value="1" >禁用</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-group col-xs-6">
                        <label class="col-xs-3 control-label">开始金额：</label>
                        <div class="col-xs-8">
                            <input type="text" class="form-control" placeholder="请输入单价的开始金额(例如:10)" />
                        </div>
                    </div>
                    <div class="form-group col-xs-6">
                        <label class="col-xs-3 control-label">结束金额：</label>
                        <div class="col-xs-8">
                            <input type="text" class="form-control" placeholder="请输入单价的结束金额(例如:27.89)" />
                        </div>
                    </div>
                </div>

            </form>
        </div>

        <div class="modal fade" tabindex="-1" id="product">
            <!-- 窗口声明 -->
            <div class="modal-dialog modal-lg">
                <!-- 内容声明 -->
                <div class="modal-content">
                    <!-- 头部、主体、脚注 -->
                    <div class="modal-header">
                        <button class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">添加商品</h4>
                    </div>
                    <div class="modal-body text-center">
                        <div class="row text-right" id="product_id_input" style="display: none;" >
                            <label for="product_id" class="col-xs-4 control-label">商品编号：</label>
                            <div class="col-xs-4">
                                <input type="text" class="form-control" id="product_id" name="product_id" readonly="true" />
                            </div>
                        </div>
                        <br>
                        <div class="row text-right">
                            <label for="product_name" class="col-xs-4 control-label">商品名称：</label>
                            <div class="col-xs-4">
                                <input type="text" class="form-control" id="product_name" name="product_name" placeholder="请输入商品名称" />
                            </div>
                        </div>
                        <br>
                        <div class="row text-right">
                            <label for="product_info" class="col-xs-4 control-label">商品简介：</label>
                            <div class="col-xs-4">
                                <!-- <input type="text" class="form-control" id="product_info" name="product_info" placeholder="请输入商品简介" /> -->
                                <textarea class="form-control" rows="3" id="product_info" name="product_info" ></textarea>
                            </div>
                        </div>
                        <br>
                        <div class="row text-right">
                            <label for="product_price" class="col-xs-4 control-label">商品单价：</label>
                            <div class="col-xs-4">
                                <input type="text" class="form-control" id="product_price" name="product_price" placeholder="请输入商品单价" />
                            </div>
                        </div>
                        <br>
                        <div class="row text-right">
                            <label class="col-xs-4 control-label">封面图片：</label>
                            <div class="col-xs-4">
                                <a href="javascript:imageUpload('#cover_image');" class="file" >选择图片</a>
                                <input type="file" name="cover_image" style="display: none;" onchange="imageChange(this)" id="cover_image" />
                            </div>
                        </div>
                        <br>

                        <!-- <div class="row text-right">
                            <label for="product_type_id" class="col-xs-4 control-label">商品类别：</label>
                            <div class="col-xs-4">
                                <select class="form-control" id="product_type_id" name="product_type_id" >
                                    <option value="-1" >请选择</option>
                                    <option value="1" >零食</option>
                                    <option value="2" >饮料</option>
                                </select>
                            </div>
                        </div>
                        <br> -->
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-primary curse-btn">确定</button>
                        <button class="btn btn-primary cancel" data-dismiss="modal">取消</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="show-list">
            <table class="table table-bordered table-hover" style="text-align: center;">
                <thead>
                <tr class="text-danger">
                    <th class="text-center">编号</th>
                    <th class="text-center">商品名称</th>
                    <th class="text-center">简介</th>
                    <th class="text-center">单价</th>
                    <th class="text-center">图片</th>
                    <!-- <th class="text-center">类别</th> -->
                    <th class="text-center">创建时间</th>
                    <th class="text-center">状态</th>
                    <th class="text-center">操作</th>
                </tr>
                </thead>
                <tbody id="tb">
                <tr>
                    <td>11</td>
                    <td>Java基础入门</td>
                    <td>Java基础相关书籍</td>
                    <td>￥49.8</td>
                    <td><img class="img" src="${pageContext.request.contextPath}/images/java-base.png" alter="no image" /></td>
                    <td>2017-10-10 11:00:00</td>
                    <td>启用</td>
                    <td class="text-center">
                        <input type="button" class="btn btn-warning btn-sm doProductModify" value="修改" />
                        <input type="button" class="btn btn-danger btn-sm" value="禁用" />
                    </td>
                </tr>
                <tr>
                    <td>17</td>
                    <td>JavaScript基础教程</td>
                    <td>JavaScript基础相关书籍</td>
                    <td>￥58.9</td>
                    <td><img class="img" src="${pageContext.request.contextPath}/images/javascript-base.png" alter="no image" /></td>
                    <td>2017-10-10 12:00:00</td>
                    <td>禁用</td>
                    <td class="text-center">
                        <input type="button" class="btn btn-warning btn-sm doProductModify" value="修改" />
                        <input type="button" class="btn btn-success btn-sm" value="启用" />
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        <!-- 分页 -->
        <div style="text-align: center;" >
            <ul id="myPages" ></ul>
        </div>

    </div>
</div>
</body>

</html>